<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    navigationBarTitleText: '宿舍管理',
    navigationBarTextStyle: '#000000',
    navigationStyle: 'custom',
    navigationBarBackgroundColor: '#ffffff',
  },
}
</route>
<template>
  <view class="w-[100vw] box-border contentBox">
    <template v-if="roles.includes('employee')">
      <view
        @click="() => goOut(item)"
        class="dataItem"
        v-for="(item, index) in routerList.staffList"
        :key="index"
      >
        <wd-icon :name="item.icon" size="22px"></wd-icon>
        <view class="text">{{ item.name }}</view>
        <wd-icon name="arrow-right" size="22px"></wd-icon>
      </view>
    </template>
    <template v-if="roles.includes('administrators')">
      <view
        @click="() => goOut(item)"
        class="dataItem"
        v-for="(item, index) in routerList.administrationList"
        :key="index"
      >
        <wd-icon :name="item.icon" size="22px"></wd-icon>
        <view class="text">{{ item.name }}</view>
        <wd-icon name="arrow-right" size="22px"></wd-icon>
      </view>
    </template>
    <template v-if="roles.includes('cleaners')">
      <view
        @click="() => goOut(item)"
        class="dataItem"
        v-for="(item, index) in routerList.cleaningList"
        :key="index"
      >
        <wd-icon :name="item.icon" size="22px"></wd-icon>
        <view class="text">{{ item.name }}</view>
        <wd-icon name="arrow-right" size="22px"></wd-icon>
      </view>
    </template>
  </view>
</template>

<script setup>
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { useSysStore } from '@/store/systemInfo'
import dd from 'dingtalk-jsapi' // 引入钉钉api
import { userLogin, getUserInfo } from '@/api/user'

defineOptions({
  name: 'Home',
})

const sysStore = useSysStore()

const roles = computed(() => sysStore.roles)

const routerList = ref({
  staffList: [
    {
      name: '入住登记',
      url: '/pages/staff/registration/index',
      icon: 'copy',
    },
    {
      name: '入住记录',
      url: '/pages/staff/record/index',
      icon: 'spool',
    },
    {
      name: '设施报修',
      url: '',
      icon: 'tools',
      url: '/pages/staff/repair/index',
    },
  ],
  administrationList: [
    {
      name: '宿舍信息',
      url: '/pages/administration/hostelInfo/index',
      icon: 'home',
    },
    {
      name: '设施信息',
      url: '/pages/administration/facilities/index',
      icon: 'logo-codepen',
    },
    {
      name: '入住清单',
      url: '/pages/administration/checkInList/index',
      icon: 'folder',
    },
    {
      name: '退房管理',
      url: '/pages/administration/checkOut/index',
      icon: 'logout',
    },
    {
      name: '报修信息',
      url: '/pages/administration/repairInformation/index',
      icon: 'rotate',
    },
    {
      name: '问题记录',
      url: '/pages/administration/problemRecord/index',
      icon: 'evaluation',
    },
  ],
  cleaningList: [
    {
      name: '入住信息',
      url: '/pages/cleaning/information/index',
      icon: 'note',
    },
    {
      name: '退房确认',
      url: '/pages/cleaning/checkOutConfirm/index',
      icon: 'check-circle',
    },
    {
      name: '日常打扫',
      url: '',
      icon: 'clear',
    },
  ],
})

const goOut = (item) => {
  uni.navigateTo({ url: item.url })
}

onLoad(() => {
  // roles.value = sysStore.roles
})

// 初始化
const initFnc = () => {
  // 钉钉免登
  const corpId = sysStore.corpId
  dd.ready(() => {
    dd.runtime.permission.requestAuthCode({
      corpId: corpId,
      onSuccess: async function (info) {
        const res = await userLogin({ code: info.authCode })
        sysStore.setToken(res.data.data.token)
        const res2 = await getUserInfo()
        sysStore.setUserInfo({ ...res2.data.user } || {})
        roles.value = res2.data.roles || []
      },
      onFail: function (err) {
        console.log(err, 888)
      },
    })
  })
}
</script>

<style lang="scss" scoped>
.contentBox {
  background-color: #f1f1f1;
  padding: 30upx;
  min-height: 100vh;
  padding-bottom: 60upx;
  .dataItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    padding: 25upx;
    border-radius: 20upx;
    margin-bottom: 30upx;
    .text {
      width: 75%;
    }
  }
}
</style>
